<template>
  <view class="page-green">
    <!-- Content -->

    <view class="h-full flex items-center justify-center pt-10">
      <image class="h-10 w-10" src="/static/images/logo.png" mode="aspectFit" />
      <text class="ml-2 text-base">
        西安旅游职业中等专业学校
      </text>
    </view>

    <view class="pt-4 text-center">
      <image class="sys-name" src="/static/images/sys-name.png" mode="aspectFit" />
    </view>
    <view class="mx-4">
      <view class="relative h-56 w-full">
        <image class="h-full w-full rounded-4" src="/static/images/banner-default.png" mode="aspectFill" />
      </view>
    </view>

    <view class="my-6 flex items-center justify-center">
      <view class="bg-title pb-2 font-bold">
        欢迎2025级新学生
      </view>
    </view>

    <view class="mx-4">
      <up-box height="" gap="12px" :bg-colors="['#EEFCFF', '#ffffff', '#ffffff']">
        <template #left>
          <view class="">
            <view>
              <view class="ml-2 mt-6 text-base text-[#303030] font-bold">
                系统登录
              </view>
              <view class="ml-2 mt-1 text-xs text-[#58647D]">
                一键智联，畅享校园服务
              </view>
              <view class="ml-2 mt-2 w-20 flex items-center justify-center rounded-4 bg-white p-1 text-center text-sm text-[#000000]" @click="goLogin">
                <view class="mr-1 text-xs">
                  去登录
                </view>
                <view class="inline-flex items-center justify-center rounded-4 bg-#00E0AE px-2px py-2px">
                  <u-icon name="arrow-right" size="7" color="#fff" />
                </view>
              </view>
            </view>
            <view class="flex justify-end">
              <image class="h-23 w-23" src="/static/images/login2.png" mode="aspectFit" />
            </view>
          </view>
        </template>
        <template #rightTop>
          <view class="flex items-center" @click="navigateTo">
            <view>
              <view class="ml-2 text-base text-[#303030] font-bold">
                迎新指南
              </view>
              <view class="ml-2 mt-1 text-xs text-[#58647D]">
                新生启航手册
              </view>
            </view>
            <image class="h-18 w-18" src="/static/images/book.png" mode="aspectFit" />
          </view>
        </template>
        <template #rightBottom>
          <view class="flex items-center">
            <view>
              <view class="ml-2 text-base text-[#303030] font-bold">
                校园风光
              </view>
              <view class="ml-2 mt-1 text-xs text-[#58647D]">
                菁菁学府画卷
              </view>
            </view>
            <image class="h-18 w-18" src="/static/images/tree.png" mode="aspectFit" />
          </view>
        </template>
      </up-box>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';

const goLogin = () => {
  uni.redirectTo({
    url: '/pages/common/login/index',
  });
};

const navigateTo = () => {
  uni.redirectTo({
    url: '/pages/biz/welcome/guide',
  });
};
</script>

<style lang="scss" scoped>
  .sys-name{
    width: 80%;
    height:95px;
  }
 .bg-title{

    background: url('@/static/images/title-bg.png') no-repeat center center;
    background-size: 100% 100%;
    font-size: 42rpx;
    text-align: center;
  }
  .bg-gradient {
    background: linear-gradient(to right, #E7F6EA, #ffffff);
  }
</style>
